<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>添加信息</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/master/layui/css/layui.css" media="all">
	<style>
		.header {
			height: 80px;
			border-bottom: 1px solid #404553;
			background-color: #ffffff;
		}

		.title {
			color: #404553;
			font-size: 18px;
			float: left;
			padding-top: 40px;
		}

		.ti_btn {
			color: #404553;
			float: left;
			padding-top: 40px;
			float: right;
		}

		.meintal {
			padding: 20px;
			border: 1px solid #eee;
		}

		.table-foot {
			width: 100%
		}
	</style>
</head>
<script src="/master/js/jQuery/jquery-2.2.3.min.js"></script>
<script src="/master/layui/layui.js"></script>
<script src="/master/layui/laytpl.js"></script>

<body class="layui-layout-body">
	<div class="layui-header header header-doc">
		<div class="layui-main">
			<div class="title">
				<h2>添加信息</h2>
			</div>
			<div class="ti_btn">
				<button class="layui-btn layui-btn-warm" onclick="ret_list()">返回列表</button>
				<button class="layui-btn layui-btn-normal">数据提交</button>
			</div>
		</div>
	</div>
	<div class="layui-box">
		<div class="layui-main">
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<ul class="layui-tab-title">
					<li class="layui-this">基本信息</li>
					<li>房屋自然情况</li>
					<li>登记权利人</li>
					<li>登记义务人</li>
					<li>限制登记信息</li>
					<li>抵押信息</li>
					<li>变动记录</li>
				</ul>
				<div class="layui-tab-content">
					<!-- 基本信息 -->
					<div class="layui-tab-item layui-show">
						<div class="meintal">
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label">产源：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入产源" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">产别：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入产别" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">登记事项：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入登记事项" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">共有方式：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入共有方式" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">登记时间：</label>
									<div class="layui-input-block">
										<input type="text" class="layui-input" placeholder="请输入登记时间" id="time1">
									</div>
								</div>
							</form>
						</div>
					</div>
					<!-- 房屋自然情况 -->
					<div class="layui-tab-item">
						<div class="meintal">
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label">所在区：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入所在区" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">街道：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入街道" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">门牌：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入登记门牌" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">附号：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入附号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">栋号：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入栋号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">单元：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入单元" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">楼层：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入楼层" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">房号：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入房号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">规划用途：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入规划用途" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">结构：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入结构" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">房屋唯一号：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入房屋唯一号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">业务件号：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入业务件号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">建筑面积(平方米)：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入建筑面积(平方米)" autocomplete="off" class="layui-input">
									</div>
								</div>
							</form>
						</div>
					</div>
					<!-- 登记权利人 -->
					<div class="layui-tab-item">
						<div class="meintal">
							<table class="layui-table">
								<colgroup>
									<col width="150">
									<col width="200">
									<col>
								</colgroup>
								<thead>
									<tr>
										<th>姓名</th>
										<th>证件类型</th>
										<th>证件号码</th>
										<th>权证号</th>
										<th>份额</th>
									</tr>
								</thead>
								<tbody id="person_view_1">
								</tbody>
							</table>
							<div class="table-foot" style="margin-left:455px">
								<button class="layui-btn" id="add_1">添加一条</button>
								<button class="layui-btn" id="delete_1">清空</button>
							</div>
							<div id="add_person" style="margin-top:20px">
								<form class="layui-form" action="">
									<div class="layui-form-item">
										<label class="layui-form-label">姓名：</label>
										<div class="layui-input-block">
											<input type="text" id="name_1" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">证件类型：</label>
										<div class="layui-input-block">
											<input type="text" id="type_1" required lay-verify="required" placeholder="请输入证件类型" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">证件号码：</label>
										<div class="layui-input-block">
											<input type="text" id="num_1" required lay-verify="required" placeholder="请输入证件号码" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">权证号：</label>
										<div class="layui-input-block">
											<input type="text" id="quannum_1" required lay-verify="required" placeholder="请输入权证号" autocomplete="off" class="layui-input">
										</div>
									</div>
									<div class="layui-form-item">
										<label class="layui-form-label">份额：</label>
										<div class="layui-input-block">
											<input type="text" id="bl_1" required lay-verify="required" placeholder="请输入份额" autocomplete="off" class="layui-input">
										</div>
									</div>
								</form>
								<div class="table-foot">
									<button class="layui-btn" style="margin:0 auto;display:block;" id="save_1">保存</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 登记义务人 -->
					<div class="layui-tab-item">
						<div class="meintal">
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label">姓名：</label>
									<div class="layui-input-block">
										<input type="text" id="name_2" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">证件类型：</label>
									<div class="layui-input-block">
										<input type="text" id="type_2" required lay-verify="required" placeholder="请输入证件类型" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">证件号码：</label>
									<div class="layui-input-block">
										<input type="text" id="num_2" required lay-verify="required" placeholder="请输入证件号码" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">权证号：</label>
									<div class="layui-input-block">
										<input type="text" id="quannum_2" required lay-verify="required" placeholder="请输入权证号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">份额：</label>
									<div class="layui-input-block">
										<input type="text" id="bl_2" required lay-verify="required" placeholder="请输入份额" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">备注：</label>
									<div class="layui-input-block">
										<input type="text" id="bz_2" required lay-verify="required" placeholder="备注" autocomplete="off" class="layui-input">
									</div>
								</div>
							</form>
						</div>
					</div>
					<!-- 限制登记信息 -->
					<div class="layui-tab-item">
						<div class="meintal">
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label">限制登记信息：</label>
									<div class="layui-input-block">
										<textarea name="desc" placeholder="无限制登记信息" class="layui-textarea"></textarea>
									</div>
							</form>
							</div>
						</div>
					</div>
					<!-- 抵押信息 -->
					<div class="layui-tab-item">
						<div class="meintal">
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label">业务件号：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入业务件号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">他权证号：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入他权证号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">抵押面积：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入抵押面积" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">权利价值：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入权利价值" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">约定期限：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入约定期限" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">抵押权人：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入抵押权人" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">债务人：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入债务人" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">状态：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入状态" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">是否登薄：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入是否登薄" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">抵押登记时间：</label>
									<div class="layui-input-block">
										<input type="text" class="layui-input" placeholder="请输入抵押登记时间" id="time1">
									</div>
								</div>
							</form>
						</div>
					</div>
					<!-- 变动记录 -->
					<div class="layui-tab-item">
						<div class="meintal">
							<form class="layui-form" action="">
								<div class="layui-form-item">
									<label class="layui-form-label">业务件号：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入业务件号" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">所有权人：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入所有权人" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">登记原因：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入登记原因" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">所有权是否载入登记簿：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="请输入所有权是否载入登记簿" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">是否征收：</label>
									<div class="layui-input-block">
										<input type="text" name="title" required lay-verify="required" placeholder="是否征收" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">登记时间：</label>
									<div class="layui-input-block">
										<input type="text" class="layui-input" placeholder="请输入登记时间" id="time1">
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/html" id="person_tpl">
	<tr>
		<td>{{d.name_1}}</td>
		<td>{{d.type_1}}</td>
		<td>{{d.num_1}}</td>
		<td>{{d.quannum_1}}</td>
		<td>{{d.bl_1}}</td>
	</tr>
</script>
<script>
	//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
	var person_arr_1 = [];//登记责任人
	var person_arr_2 = [];//登记义务人
	layui.use('element', function () {
		var element = layui.element;

		//…
	});

	function ret_list() {
		window.location.href = "index.html"
	}

	layui.use('laydate', function () {
		var laydate = layui.laydate;

		//执行一个laydate实例
		laydate.render({
			elem: '#time1' //指定元素
		});
	});
	// 登记责任人****************************************************
	$("#add_person").hide()
	$("#add_1").click(function () {
		$("#add_person").show()

	})
	$("#save_1").click(function () {
		var obj_1 = {
			name_1: $("#name_1").val(),
			type_1: $("#type_1").val(),
			num_1: $("#num_1").val(),
			quannum_1: $("#quannum_1").val(),
			bl_1: $("#bl_1").val(),
		}
		person_arr_1.push(obj_1)
		var view = $("#person_view_1")
		var tpl = $("#person_tpl").html()
		var src = '';
		laytpl(tpl).render(obj_1, function (html) {
			src += html;
		});
		view.append(src)
		$("#add_person").hide()

	})
	$("#delete_1").click(function () {
		$("#person_view_1").empty()
	})
	// 登记义务人******************************************************


</script>

</html>